<template>
  <div class="container" :class="fontColor">
    <header>
        <slot name="header"></slot>    
    </header>
    <main>
        <slot></slot>
        <slot name="yellow" type="yellow"></slot>
    </main>
    <footer>
      <p>slot - footer</p>
        <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'container',
  props: ['type'],
  computed:{
    fontColor(){
      return{
        'yellow-font' : this.type == 'yellow'
      }
    }
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    console.log(this.type)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
@import '../../scss/base.scss';
.header{
    .top-bar{
        width: 100%;
        height: 50px;
        &-logo{
            float: left;
        }
    }
}
.yellow-font{
  color : #aa0;
}
</style>
